import React from "react";
import "./index.css";
import {CascadeListType} from "./types";
import {Checkbox} from "antd";
import {CheckboxChangeEvent} from "antd/lib/checkbox";

interface EntryProps {
    values: CascadeListType[][];
    index: number;
    onSelect: (index: number, idx: number) => void;
    onCheck: (e: CheckboxChangeEvent, index: number, idx: number) => void;
}

const Entry: React.FC<EntryProps> = (props) => {

    const {values, index, onCheck, onSelect} = props;
    return (
        <div className="cascade-entry">
            {values[index].map((item, idx) => (
                <div key={item.value} onClick={() => onSelect(index, idx)} className="cascade-entry-item">
                    <Checkbox checked={item.state == 2}
                              indeterminate={item.state == 1}
                              onChange={(e) => onCheck(e, index, idx)}
                    >{item.label}</Checkbox>
                </div>
            ))}
        </div>
    )
}

export default Entry;